<template>
  <div style="height: 100%">
    <!--工作区-->
    <el-container
      ref="listWarp"
      style="height: 100%; background-color: #fff"
      v-loading="listLoading"
      :element-loading-text="loadingText"
    >
      <!--头部-->
      <el-header class="toolbar-wap" style="height: 45px">
        <!--工具条按钮-->
        <toolbuttonVue
          v-for="button in toolButtons"
          :key="button.text"
          :text="button.text"
          :icon="button.icon"
          :disabled="button.disabled"
          :right-line="button.rightLine"
          :left-line="button.leftLine"
          :title="button.title"
          @buttonClick="toolButtonClick"
        />

        <el-input
          v-model="searchValue"
          placeholder="请输入账号进行搜索"
          style="width: 200px; float: right; margin-top: 6px"
          size="small"
          @change="searchChange"
        >
          <template #prefix>
            <i class="el-input__icon el-icon-search"></i>
          </template>
        </el-input>
      </el-header>
      <!--列表-->
      <el-main style="height: 100%" class="page-main">
        <el-table
          ref="dataListTable"
          :data="dataList"
          highlight-current-row
          :default-sort="defaultOrder"
          border
          tooltip-effect="light"
          height="100%"
          style="width: 100%"
        >
          <!--序号-->
          <el-table-column type="index" align="center" label="序号" width="49" />
          <!--绑定列-->
          <el-table-column
            v-for="col in columns.filter(item => item.visible)"
            :prop="col.prop"
            :label="col.label"
            :sortable="col.sortable ? 'custom' : col.sortable"
            :resizable="col.resizable"
            :show-overflow-tooltip="col.tooltip"
            :align="col.align"
            :width="col.width"
            :fixed="col.fixed"
            :key="col.prop"
          />
          <el-table-column align="center" label="最后登录时间" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ moment(scope.row.lastLoginTime).format('yyyy-MM-DD hh:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ moment(scope.row.createdAt).format('yyyy-MM-DD hh:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="编辑时间" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ moment(scope.row.updatedAt).format('yyyy-MM-DD hh:mm:ss') }}</span>
            </template>
          </el-table-column>
          <!--暂无数据-->
        </el-table>
      </el-main>
      <!--底部分页-->
      <el-footer style="height: 45px" class="page-footer"> </el-footer>
    </el-container>
  </div>
</template>

<script>
import toolbuttonVue from '@/components/toolbar/toolbutton.vue';
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue';
import { userApi } from '../../api/user';
import moment from 'moment';
export default {
  components: { toolbuttonVue },
  name: '',
  setup() {
    const data = reactive({
      toolButtons: [
        { text: '刷新', icon: 'shuaxin', rightLine: true },
        { text: '新增', auth: '010501', icon: 'add' },
        { text: '编辑', auth: '010502', icon: 'edit' },
        { text: '删除', auth: '010503', icon: 'delete' },
      ],
      //列
      columns: [
        {
          prop: 'account',
          label: '帐号',
          sortable: true,
          width: '120',
          visible: true,
          fixed: false,
          tooltip: true,
          max: 30,
        },
        {
          prop: 'username',
          label: '姓名',
          sortable: true,
          width: '110',
          visible: true,
          tooltip: true,
          max: 50,
        },
        {
          prop: 'roleName',
          label: '系统角色',
          sortable: false,
          width: '120',
          visible: true,
          tooltip: true,
          max: 100,
        },
        {
          prop: 'phone',
          label: '手机号码',
          sortable: false,
          width: '130',
          align: 'center',
          tooltip: true,
          visible: true,
          max: 20,
        },
        {
          prop: 'email',
          label: 'email',
          sortable: false,
          width: '160',
          visible: true,
          tooltip: true,
          max: 20,
        },
        {
          prop: 'lastLoginTime',
          label: '最后登录时间',
          width: '160',
          sortable: true,
          visible: false,
          tooltip: true,
          type: 'date',
        },
        {
          prop: 'createdAt',
          label: '创建时间',
          sortable: false,
          visible: false,
          tooltip: true,
        },
        {
          prop: 'updatedAt',
          label: '编辑时间',
          sortable: false,
          visible: false,
          tooltip: true,
          type: 'date',
        },
      ],
      listLoading: false,
      loadingText: '数据正在加载中',
      searchValue: '',
    });
    const dataList = ref([]);
    const toolButtonClick = text => {};
    const searchChange = e => {
      console.log(e);
      getUserList();
    };
    const getUserList = () => {
      data.listLoading = true;
      userApi
        .userList({
          account: data.searchValue,
        })
        .then(res => {
          dataList.value = res.data.rows;
          data.listLoading = false;
        });
    };
    onBeforeMount(() => {});
    onMounted(() => {
      getUserList();
    });
    return {
      ...toRefs(data),
      toolButtonClick,
      dataList,
      moment,
      searchChange,
    };
  },
};
</script>
<style scoped lang='less'>
</style>